﻿@section PageTitle { Blend Modes }

<p class="summary">
	Each layer has a <a href="http://en.wikipedia.org/wiki/Blend_modes">blend mode</a> that specifies how it will 
	blend with the layer(s) underneath it. DynamicImage supports most of the standard Photoshop blend modes.
</p>

<h2>Source Images (Background / Source)</h2>

<p>
	@Html.DynamicImageTag(b => b.WithLayer(
		LayerBuilder.Image.SourceFile("~/Assets/Images/AutumnLeaves.jpg")
			.WithFilter(FilterBuilder.Resize.ToWidth(250))
	))
	
	@Html.DynamicImageTag(b => b.WithLayer(
		LayerBuilder.Image.SourceFile("~/Assets/Images/Forest.jpg")
			.WithFilter(FilterBuilder.Resize.ToWidth(250))
	))
</p>
			
<h2>Blended Images</h2>
			
<ul class="thumbnails">
	@foreach (var blendMode in Enum.GetNames(typeof(BlendMode))) {
	<li class="span3">
		<div class="thumbnail">
			@Html.DynamicImageTag(b => b
				.WithLayer(
					LayerBuilder.Image.SourceFile("~/Assets/Images/AutumnLeaves.jpg")
						        .WithFilter(FilterBuilder.Resize.ToWidth(250)))
				.WithLayer(
					LayerBuilder.Image.SourceFile("~/Assets/Images/Forest.jpg").BlendMode((BlendMode) Enum.Parse(typeof(BlendMode), blendMode))
						        .WithFilter(FilterBuilder.Resize.ToWidth(250)))
				)
			<p>@blendMode</p>
		</div>
	</li>
	}
</ul>